<template>
  <div class="progame">
    <div class="map">
      <Map @onload="handleMapLoad" :options="mapOptions" />
    </div>
    <mapBaseLayer @handleChangeTree="changeChecked" />
    <div class="search-right">
      <SchemeSelect
        :placeholder="state.placeholderOne"
        :define-options="state.optionsOne"
        :images="'u97.png'"
        @changeSelect="handleChangeSelect"
      />
    </div>

    <!-- 右侧弹窗 -->
    <ExamHistory @handleShowAdded="handleShowAdded" :watershed-id="state.watershedId" />
    <!-- 新增考核 -->
    <added-check
      :dialogVisible="showAdded"
      :checkObj="state.checkObj"
      :watershedId="state.watershedId"
      @handleEmitClose="handleEmitClose"
    >
    </added-check>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
// 新增考核
import SchemeSelect from '@/components/app-publicui/scheme-select.vue'
import mapBaseLayer from '@/components/app-map/mapBaseLayer/index.vue'
import addedCheck from './cpns/ExamHistory/cpns/addedCheck/index.vue'
import { getZone } from '@/services/modules/model-config'
import ExamHistory from './cpns/ExamHistory/index.vue'
import Map from '@/components/app-map/map.vue'
import {
  clearLayer,
  addSecPoints,
  addSecName,
  addTopology,
  addJsUnit,
  addRainLayer,
  addJsUnitNoScheme,
  addWataLayer,
  addRiverLayer,
  addNodeLayer,
  addTileLayer,
  addDynamicLayerShowAll,
  locatePoint,
  addBasinVectorTiles,
  removeBasinVectorTiles
} from '@/utils/mapUtils'
import {
  SEC_LAYER,
  SEC_NAME_LAYER,
  RAIN_LAYER,
  JS_UNIT_LAYER,
  TOPOLOGY_LAYER,
  DWH_SKBYUNIT_LAYER_URL,
  DWH_SKBYUNIT_LAYER,
  DWH_XAJUNIT_LAYER_URL,
  DWH_XAJUNIT_LAYER,
  YSH_SKBYUNIT_LAYER_URL,
  YSH_SKBYUNIT_LAYER,
  YSH_XAJUNIT_LAYER_URL,
  DWH_BASE_LAYER_URL,
  DWH_BASE_LAYER,
  YSH_BASE_LAYER,
  YSH_BASE_LAYER_URL,
  YSH_XAJUNIT_LAYER,
  WATA_LAYER,
  RIVER_LAYER,
  NODE_LAYER
} from '@/constants'
//地图api
import {
  getPPtnGeomList,
  getSecGeomList,
  getNodeGeomList,
  getTopologyGeomList
} from '@/services/modules/map.js'
// 地图JSON 数据
import secData from '@/assets/data/map_data/sec.json'
import jsUnitData from '@/assets/data/map_data/js_unit.json'
import topologyData from '@/assets/data/map_data/topology.json'
import wataData from '@/assets/data/map_data/wata.json'
import riverData from '@/assets/data/map_data/rivl.json'
import nodeData from '@/assets/data/map_data/node.json'

//沂沭河流域json
import yshsecData from '@/assets/data/map_data/yshInfo/sec.json'
import yshjsUnitData from '@/assets/data/map_data/yshInfo/unitdata.json'
import yshtopologyData from '@/assets/data/map_data/yshInfo/topologyData.json'
import yshnodeData from '@/assets/data/map_data/yshInfo/node.json'
const checkSec = ref(true)
const checkJsUnit = ref(true)
const checkTopology = ref(true)
const checkWata = ref(true)
const checkRiver = ref(true)
const checkNode = ref(true)
const checkRainSite = ref(true)
const mapOptions = { crs: 'EPSG:4490', basemaps: [] }
const state = reactive({
  pptn: {},
  secGeoData: {},
  nodeGeoData: {},
  topologyGeoData: {},
  // checkObj: '',
  placeholderOne: '请选择流域',
  // 计算区域列表
  optionsOne: [],
  // 流域id
  watershedId: 0
})
//新安江 style
const xajUnitStyle = reactive({
  xaj: {
    weight: 0.3,
    // fillOpacity: 0.6,
    fillColor: 'green',
    color: 'red',
    fill: false
  }
})
//时空变源style
const skbyUnitStyle = reactive({
  skby: {
    weight: 0.3,
    // fillOpacity: 0.6,
    fillColor: 'red',
    color: 'yellow',
    fill: false
  }
})
//地图小流域河道
const baselayerStyle = reactive({
  //小流域
  wata: {
    weight: 0.8,
    fillOpacity: 0.6,
    fillColor: '#FFFF00',
    color: '#FFFF00',
    fill: false
  },
  //河道
  rivl: {
    weight: 1,
    color: '#00BFFF'
  }
  //水动力
  // ？？？
})
//地图获取雨量站
function PPtnGeomList() {
  return new Promise((resolve, reject) => {
    getPPtnGeomList({ zoneId: state.watershedId }).then((res) => {
      if (res.code === 200) {
        state.pptn = res.data
        resolve(state.pptn)
      }
    })
  })
}
//地图获取预报对象
function SecGeomList() {
  return new Promise((resolve, reject) => {
    getSecGeomList({ zoneId: state.watershedId }).then((res) => {
      if (res.code === 200) {
        state.secGeoData = res.data
        resolve(state.secGeoData)
      }
    })
  })
}
//地图获取节点
function NodeGeomList() {
  return new Promise((resolve, reject) => {
    getNodeGeomList({ zoneId: state.watershedId }).then((res) => {
      if (res.code === 200) {
        state.nodeGeoData = res.data
        resolve(state.nodeGeoData)
      }
    })
  })
}
//地图获取拓扑线
function TopologyGeomList() {
  return new Promise((resolve, reject) => {
    getTopologyGeomList({ zoneId: state.watershedId }).then((res) => {
      if (res.code === 200) {
        state.topologyGeoData = res.data
        resolve(state.topologyGeoData)
      }
    })
  })
}
// 控制新增考核弹框
// let showAdded = ref(false)
//
/**
 * 地图实例
 */
let mapInstance = null
/**
 * 地图实例完成后的调用函数
 */
const handleMapLoad = ({ map }) => {
  setTimeout(async () => {
    mapInstance = map
    await PPtnGeomList()
    await SecGeomList()
    await NodeGeomList()
    await TopologyGeomList()
    const layerUrlS = mapUrl
    addTileLayer(mapInstance, layerUrlS, 0, 74, '山东底图')
    addDynamicLayerShowAll(
      mapInstance,
      'https://giskg-sdsl.gistack.cn/OneMapServer/rest/services/L1_Liuyujie/MapServer',
      12,
      11,
      '流域界'
    )
    addDynamicLayerShowAll(
      mapInstance,
      'https://giskg-sdsl.gistack.cn/OneMapServer/rest/services/Shandong_XZHQ/MapServer',
      26,
      32,
      '蓄滞洪区'
    )
    // 添加矢量切片数据
    addBasinVectorTiles(map, DWH_BASE_LAYER_URL, DWH_BASE_LAYER, baselayerStyle)
    //添加雨量站
    addRainLayer(window.mapInstance, state.pptn, RAIN_LAYER)
    // 新添加图层 和其他模块地图相同
    // 添加断面点
    addSecPoints(mapInstance, state.secGeoData.features, SEC_LAYER)
    // 添加断面名称
    addSecName(mapInstance, state.secGeoData.features, SEC_NAME_LAYER)
    //添加计算单元
    // addJsUnitNoScheme(map, jsUnitData, JS_UNIT_LAYER)
    //添加拓扑线
    addTopology(mapInstance, state.topologyGeoData, TOPOLOGY_LAYER)
    //添加小流域
    // addWataLayer(map, wataData, WATA_LAYER)
    //添加河道
    // addRiverLayer(map, riverData, RIVER_LAYER)
    //添加节点
    addNodeLayer(mapInstance, state.nodeGeoData, NODE_LAYER)
    locatePoint(mapInstance, 117.1775, 36.06469, 10)
  }, 100)
}

const changeChecked = ({ event, item }) => {
  //被选中的值
  console.log(event + ':' + item)
  switch (item) {
    case 'sec':
      if (event) {
        if (state.watershedId == 1) {
          // 添加断面
          addSecPoints(mapInstance, state.secGeoData.features, SEC_LAYER)
          // 添加断面名称
          addSecName(mapInstance, state.secGeoData.features, SEC_NAME_LAYER)
        } else if (state.watershedId == 2) {
          // 添加断面点
          addSecPoints(mapInstance, state.secGeoData.features, SEC_LAYER)
          // 添加断面名称
          addSecName(mapInstance, state.secGeoData.features, SEC_NAME_LAYER)
        }
      } else {
        clearLayer(mapInstance, SEC_LAYER)
        clearLayer(mapInstance, SEC_NAME_LAYER)
      }
      break
    case 'jsUnitSk':
      if (event) {
        if (state.watershedId == 1) {
          //添加预报单元
          addBasinVectorTiles(
            window.mapInstance,
            DWH_SKBYUNIT_LAYER_URL,
            DWH_SKBYUNIT_LAYER,
            skbyUnitStyle
          )
          // //添加计算单元
          // addJsUnit(window.mapInstance, jsUnitData, JS_UNIT_LAYER)
        } else if (state.watershedId == 2) {
          // // //添加计算单元
          // addJsUnit(window.mapInstance, yshjsUnitData, JS_UNIT_LAYER)
          addBasinVectorTiles(
            window.mapInstance,
            YSH_SKBYUNIT_LAYER_URL,
            YSH_SKBYUNIT_LAYER,
            skbyUnitStyle
          )
        }
      } else {
        removeBasinVectorTiles(window.mapInstance, DWH_SKBYUNIT_LAYER)
        removeBasinVectorTiles(window.mapInstance, YSH_SKBYUNIT_LAYER)
      }
      break
    case 'jsUnitXaj':
      if (event) {
        if (state.watershedId == 1) {
          //添加预报单元
          addBasinVectorTiles(
            window.mapInstance,
            DWH_XAJUNIT_LAYER_URL,
            DWH_XAJUNIT_LAYER,
            xajUnitStyle
          )
          // //添加计算单元
          // addJsUnit(window.mapInstance, jsUnitData, JS_UNIT_LAYER)
        } else if (state.watershedId == 2) {
          // // //添加计算单元
          // addJsUnit(window.mapInstance, yshjsUnitData, JS_UNIT_LAYER)
          addBasinVectorTiles(
            window.mapInstance,
            YSH_XAJUNIT_LAYER_URL,
            YSH_XAJUNIT_LAYER,
            xajUnitStyle
          )
        }
      } else {
        removeBasinVectorTiles(window.mapInstance, DWH_XAJUNIT_LAYER)
        removeBasinVectorTiles(window.mapInstance, YSH_XAJUNIT_LAYER)
      }
      break
    case 'topology':
      if (event) {
        addTopology(mapInstance, state.topologyGeoData, TOPOLOGY_LAYER)
      } else {
        clearLayer(mapInstance, TOPOLOGY_LAYER)
      }
      break
    case 'river':
      if (event) {
        if (state.watershedId == 1) {
          //添加小流域
          // addWataLayer(mapInstance, wataData, WATA_LAYER)
          removeBasinVectorTiles(mapInstance, DWH_BASE_LAYER)
          addBasinVectorTiles(mapInstance, DWH_BASE_LAYER_URL, DWH_BASE_LAYER, baselayerStyle)
        } else if (state.watershedId == 2) {
          removeBasinVectorTiles(mapInstance, YSH_BASE_LAYER)
          addBasinVectorTiles(mapInstance, YSH_BASE_LAYER_URL, YSH_BASE_LAYER, baselayerStyle)
        }
        // //添加河道
        // addRiverLayer(mapInstance, riverData, RIVER_LAYER)
      } else {
        if (state.watershedId == 1) {
          // clearLayer(mapInstance, RIVER_LAYER)
          removeBasinVectorTiles(mapInstance, DWH_BASE_LAYER)
          // addBasinVectorTiles(mapInstance, DWH_BASE_LAYER_URL, DWH_BASE_LAYER, basinLayerStyle)
        } else if (state.watershedId == 2) {
          // clearLayer(mapInstance, RIVER_LAYER)
          removeBasinVectorTiles(mapInstance, YSH_BASE_LAYER)
          // addBasinVectorTiles(mapInstance, YSH_BASE_LAYER_URL, YSH_BASE_LAYER, basinLayerStyle)
        }
      }
      break
    case 'node':
      if (event) {
        addNodeLayer(mapInstance, state.nodeGeoData, NODE_LAYER)
      } else {
        clearLayer(mapInstance, NODE_LAYER)
      }
      break
    case 'rainSite':
      if (event) {
        addRainLayer(map, state.pptn, RAIN_LAYER)
      } else {
        clearLayer(mapInstance, RAIN_LAYER)
      }
      break
    default:
      break
  }
}
// 打开新曾考核弹窗
// const handleShowAdded = (row) => {
//   console.log(row, '666')
//   state.checkObj = row
//   showAdded.value = true
// }
// 关闭新增考核弹窗
const handleEmitClose = () => {
  showAdded.value = false
}
//选择流域
async function handleChangeSelect(item, val) {
  console.log(item, '流域')
  state.watershedId = item
  await PPtnGeomList()
  await SecGeomList()
  await NodeGeomList()
  await TopologyGeomList()
  clearLayer(mapInstance, SEC_LAYER)
  clearLayer(mapInstance, SEC_NAME_LAYER)
  clearLayer(mapInstance, JS_UNIT_LAYER)
  clearLayer(mapInstance, TOPOLOGY_LAYER)
  clearLayer(mapInstance, NODE_LAYER)
  clearLayer(mapInstance, WATA_LAYER)
  clearLayer(mapInstance, RIVER_LAYER)
  clearLayer(mapInstance, NODE_LAYER)
  let map = mapInstance
  if (item == 1) {
    // 添加断面点
    addSecPoints(mapInstance, state.secGeoData.features, SEC_LAYER)
    // 添加断面名称
    addSecName(mapInstance, state.secGeoData.features, SEC_NAME_LAYER)
    //添加计算单元
    // addJsUnitNoScheme(map, jsUnitData, JS_UNIT_LAYER)
    //添加拓扑线
    addTopology(mapInstance, state.topologyGeoData, TOPOLOGY_LAYER)
    // //添加小流域
    // addWataLayer(map, wataData, WATA_LAYER)
    // //添加河道
    // addRiverLayer(map, riverData, RIVER_LAYER)
    addRainLayer(mapInstance, state.pptn, RAIN_LAYER)
    //添加节点
    addNodeLayer(mapInstance, state.nodeGeoData, NODE_LAYER)
    locatePoint(mapInstance, 117.1775, 36.06469, 10)
  } else if (item == 2) {
    //添加拓扑线
    addTopology(mapInstance, state.topologyGeoData, TOPOLOGY_LAYER)
    // 添加断面点
    addSecPoints(mapInstance, state.secGeoData.features, SEC_LAYER)
    // 添加断面名称
    addSecName(mapInstance, state.secGeoData.features, SEC_NAME_LAYER)
    // //添加计算单元
    addJsUnit(mapInstance, yshjsUnitData, JS_UNIT_LAYER)
    addJsUnitNoScheme(mapInstance, yshjsUnitData, JS_UNIT_LAYER)
    // //添加节点
    addNodeLayer(mapInstance, state.nodeGeoData, NODE_LAYER)
    addRainLayer(mapInstance, state.pptn, RAIN_LAYER)
    locatePoint(mapInstance, 118.379657, 35.018398, 10)
  }
}
function initData() {
  // 获取计算区域
  getZone().then((res) => {
    if (res.code === 200) {
      state.optionsOne = res.data
    }
  })
}
onMounted(() => {
  initData()
})
</script>

<style lang="less" scoped>
.el-row {
  height: 30px;
}
.progame {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  .map {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .search-right {
    position: absolute;
    margin-top: 10px;
    margin-left: 20px;

    .select-bg {
      display: inline-block;
      width: 15px;
      height: 20px;
      background: url(@/assets/images/home/u97.png) no-repeat;
      background-size: 100% 100%;
      line-height: 20px;
    }

    :deep(.el-input__wrapper) {
      border: solid 1px #169bd5;
    }
  }

  .legend-box {
    position: absolute;
    background: rgba(255, 255, 255, 0.7);
    bottom: 20px;
    width: 220px;
    height: 170px;
    margin-left: 20px;
    border: #169bd5 2px solid;
    border-radius: 5px;
    .legend-title {
      display: block;
      margin-left: 30px;
      margin-top: 10px;
      color: #169bd5;
      font-weight: 500;
    }
    .legend-item {
      margin-left: 20px;
      margin-top: 10px;
    }
  }
}
</style>
